<nz-spin [nzSpinning]="_isSpinning">
<form nz-form  [formGroup]="validateForm" (ngSubmit)="submitForm($event,validateForm.value)">
  <div nz-form-item nz-row>
    <h3>新增/修改档案</h3>
  </div>
  <div nz-col [nzSpan]="12">
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="4">
        <label nz-form-item-required>档案名</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('name')" nzHasFeedback>
        <nz-input formControlName="name" [(ngModel)] = "name" [nzType]="'text'" [nzPlaceHolder]="'请输入档案名'" [nzSize]="'large'" >
        </nz-input>
        <div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('required')">请输入档案名!</div>
        <div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('duplicated')">档案名不符合要求!</div>
        <div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').pending">校验中...</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="4">
        <label nz-form-item-required>发生地</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('address')" nzHasFeedback>
        <nz-input formControlName="address" [(ngModel)] = "address" [nzPlaceHolder]="'例: 中国/南京'" [nzType]="'address'" [nzSize]="'large'">
        </nz-input>
        <div nz-form-explain *ngIf="getFormControl('address').dirty&&getFormControl('address').hasError('required')">请输入发生地!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="4">
        <label>发布类型</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('choosetype')">
        <nz-checkbox-group formControlName="choosetype" [(ngModel)]="checkOptionsOne" ></nz-checkbox-group>

      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label nz-form-item-required>关键词</label>
      </div>
      <div>
        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('keyword')" nzHasFeedback>
          <nz-input formControlName="keyword" [(ngModel)]="keyword"  [nzPlaceHolder]="'请输入关键词'" [nzType]="'text'" [nzSize]="'large'">
          </nz-input>
          <div nz-form-explain *ngIf="getFormControl('keyword').dirty&&getFormControl('keyword').hasError('required')">请输入关键词!</div>
        </div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label nz-form-item-required>书籍状态</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('status')" nzHasFeedback>
          <nz-select formControlName="status" [nzSize]="'large'" [nzPlaceHolder]="'-请选择-'" [(ngModel)]="status" >
            <nz-option [nzLabel]="'未发布'" [nzValue]="'0'"></nz-option>
            <nz-option [nzLabel]="'已发布'" [nzValue]="'1'"></nz-option>
            <nz-option [nzLabel]="'已下架'" [nzValue]="'2'"></nz-option>
          </nz-select>

        <div nz-form-explain *ngIf="getFormControl('status').dirty&&getFormControl('status').hasError('required')">-请选择-!</div>

      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label nz-form-item-required>档案简介</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('description')">
        <nz-input formControlName="description" [nzRows]="2" [nzType]="'textarea'" [nzPlaceHolder]="'请输入档案简介'" [(ngModel)]="description" [nzSize]="'large'">
        </nz-input>
        <div nz-form-explain *ngIf="getFormControl('description').dirty&&getFormControl('description').hasError('required')">请输入档案简介!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label nz-form-item-required>档案号</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('number')">
        <nz-input formControlName="number" [(ngModel)]="number" [nzRows]="2" [nzType]="'text'" [nzPlaceHolder]="'请输入档案号'" [nzSize]="'large'">
        </nz-input>
        <div nz-form-explain *ngIf="getFormControl('number').dirty&&getFormControl('number').hasError('required')">请输入档案号!</div>
      </div>
    </div>
  </div>

  <div nz-col [nzSpan]="12">
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label nz-form-item-required>入库时间</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('publishTime')">
          <nz-datepicker formControlName="publishTime"  [(ngModel)]="publishTime" [nzSize]="'large'" [nzPlaceHolder]="'请选择入库时间'" style="width: 100%;"  [nzDisabledDate]="_disabledDate"></nz-datepicker>
          <div nz-form-explain *ngIf="getFormControl('publishTime').dirty&&getFormControl('publishTime').hasError('required')">请选择入库时间!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label nz-form-item-required>时间线</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('period')">
        <nz-select  [nzSize]="'large'" formControlName="period" [(ngModel)]="period" nzAllowClear>
          <nz-option
            *ngFor="let option of timeperiod"
            [nzLabel]="option"
            [nzValue]="option">
          </nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="getFormControl('period').dirty&&getFormControl('period').hasError('required')">请选择时间线!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label nz-form-item-required>所属馆</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('archive')">
        <nz-select  [nzSize]="'large'" formControlName="archive" [(ngModel)]="archive" nzAllowClear>
          <nz-option
            *ngFor="let option of allsingle"
            [nzLabel]="option.name"
            [nzValue]="option.id">
          </nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="getFormControl('archive').dirty&&getFormControl('archive').hasError('required')">请选择所属馆!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label nz-form-item-required>上传封面图</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control>
        <input type="hidden" formControlName="pic" value="picid">
        <app-previewimg  [(previewImgSrcs)]="previewImgSrcs" (previewImgFileChange)="toSet()"  [(previewImgFile)]="previewImgFile" [maxPic]="1" style="padding: 0px"></app-previewimg>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label>上传附件</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control >
        <ul class="filegroup">
          <li *ngFor="let item of fileList">
            <img [src]="item.showurl" alt="">
            <nz-tooltip [nzTitle]="item.name" [nzPlacement]="'bottom'">
              <p nz-tooltip>{{item.originalname}}</p>
            </nz-tooltip>
            <div>
              <span>
                <i class="anticon anticon-eye seeImg" *ngIf="item.preview!='2'" (click) = "toDos(item.preview,item.showurl,item.id,item.actualsize,item.standardsize)"></i>
                <i [ngClass]="{'tocenter':item.preview=='2'}" class="anticon anticon-delete uploadimgremove" (click)="remove(item.id)"></i>
              </span>
            </div>
          </li>

        </ul>
        <a style="line-height: 28px" nz-button [nzType]="'primary'" (click)="showModal('文件上传')">上传附件</a>

      </div>
    </div>
    <div nz-form-item nz-row>
    <div nz-col [nzOffset]="4" [nzSpan]="12" nz-form-control>
      <button nz-button [nzType]="'primary'" [nzSize]="'large'"  (click)="submitFn()" [disabled]="!validateForm.valid">提交</button>
      <button nz-button [nzSize]="'large'" style="float: right" (click)="resetForm($event)">重置</button>
    </div>
  </div>
  </div>
</form>

</nz-spin>
<nz-modal [nzWidth]="width" [nzVisible]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)">
  <ng-template #modalTitle>
    {{names}}
  </ng-template>
  <ng-template #modalContent>
    <iframe *ngIf="names=='文件上传'" style="width: 840px;height: 380px;margin-left: 28px" [src]="src" frameborder="0"></iframe>
    <div *ngIf="names!='文件上传'" style="width: 420px;display: block;margin: 0 auto;background-color: #999" >
      <img style="width: 420px;display: block;margin: 0 auto;"  [src]="seeurl" alt="">
    </div>
  </ng-template>
</nz-modal>
